import { useContext } from 'react';
import { Tag } from 'antd';
import { useLocation, useModel } from 'umi';

import access from '@/access';
import { MainLayoutContext } from '@/layouts';
import { testingMap } from '@/layouts/components/SideMenu/constants';

import { mainMenuList } from '../../../../../config/routes/index';
import Menu from '../components/Menu';
import MenuItem from '../components/MenuItem';
import SubMenu from '../components/SubMenu';

import '../components/index.less';

const SecMenu = () => {
  const mainMenus = mainMenuList;
  const context = useContext(MainLayoutContext);
  const { initialState } = useModel('@@initialState');
  const currentRoles = access(initialState);
  const mainMenuPath = '/' + useLocation().pathname.split('/')[1];
  const parentRoute = mainMenus.find((route) => route.path === mainMenuPath);
  const secRoutes = parentRoute?.routes;

  return secRoutes ? (
    <Menu
      style={{
        height: '100vh',
        display:
          !context.isOpen || (!context.isOpen && context.hasSecMenu)
            ? 'none'
            : 'flex',
      }}
      bottomRender={
        <>
          <div>© 2023 Made with love</div>
          <div>by 内容&用户平台团队</div>
        </>
      }
    >
      {secRoutes
        .filter((secRoute) => !secRoute.access || currentRoles[secRoute.access])
        .map((secRoute) => {
          if (secRoute.routes?.length) {
            return (
              // 一级展开导航
              <SubMenu
                openSubMenus
                MenuIndex={1}
                route={secRoute}
                key={secRoute.name}
                title={secRoute.name}
                defaultArrowDir="up"
              >
                {secRoute.routes
                  .filter((thirdRoute) => {
                    return Object.keys(currentRoles)
                      .filter((item) => !!currentRoles[item])
                      .includes(thirdRoute.access);
                  })
                  .map((thirdRoute) => {
                    if (thirdRoute.routes?.length) {
                      return (
                        // 二级展开导航
                        <SubMenu
                          openSubMenus
                          MenuIndex={2}
                          route={thirdRoute}
                          key={thirdRoute.name}
                          title={thirdRoute.name}
                          defaultArrowDir="right"
                        >
                          {thirdRoute.routes
                            .filter((forthRoute) => {
                              return Object.keys(currentRoles)
                                .filter((item) => !!currentRoles[item])
                                .includes(forthRoute.access);
                            })
                            .map((forthRoute) => {
                              return (
                                // 三级无展开导航
                                <MenuItem
                                  key={forthRoute.name}
                                  MenuIndex={3}
                                  pathList={[
                                    parentRoute.path,
                                    secRoute.path,
                                    thirdRoute.path,
                                    forthRoute.path,
                                  ]}
                                  route={forthRoute}
                                  tagRender={
                                    forthRoute.testing && (
                                      <Tag
                                        size="small"
                                        className="testing-icon"
                                      >
                                        {testingMap[forthRoute.testing]}
                                      </Tag>
                                    )
                                  }
                                >
                                  <span>{forthRoute.name}</span>
                                </MenuItem>
                              );
                            })}
                        </SubMenu>
                      );
                    }
                    return (
                      // 二级无展开导航
                      <MenuItem
                        key={thirdRoute.name}
                        MenuIndex={2}
                        route={thirdRoute}
                        pathList={[
                          parentRoute.path,
                          secRoute.path,
                          thirdRoute.path,
                        ]}
                        tagRender={
                          thirdRoute.testing && (
                            <Tag size="small" className="testing-icon">
                              {testingMap[thirdRoute.testing]}
                            </Tag>
                          )
                        }
                      >
                        <span>{thirdRoute.name}</span>
                      </MenuItem>
                    );
                  })}
              </SubMenu>
            );
          }
          return (
            // 一级无展开导航
            <MenuItem
              key={secRoute.name}
              MenuIndex={1}
              pathList={[parentRoute.path, secRoute.path]}
              route={secRoute}
              tagRender={
                secRoute.testing && (
                  <Tag size="small" className="testing-icon">
                    {testingMap[secRoute.testing]}
                  </Tag>
                )
              }
            >
              <span className="main-menu-name">{secRoute.name}</span>
            </MenuItem>
          );
        })}
    </Menu>
  ) : null;
};

export default SecMenu;
